<template>
  <dys-modal :open="open" :title="t('学生管理')" :width="1200">
    <dys-search-form
      @search="reload"
      @reset="Object.assign(queryParams, initValue)"
    >
      <a-col :span="8">
        <a-form-item :label="t('学号')">
          <a-input
            v-model:value="queryParams.studentNo"
            :placeholder="t('请输入学号')"
            allow-clear
          ></a-input>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :label="t('学生名称')">
          <a-input
            v-model:value="queryParams.personName"
            :placeholder="t('请输入学生名称')"
            allow-clear
          ></a-input>
        </a-form-item>
      </a-col>
    </dys-search-form>
    <dys-table
      :columns="columns"
      :data-source="state.dataSource"
      :loading="state.loading"
      :pagination="state.pagination"
    ></dys-table>
  </dys-modal>
</template>
<script lang="ts" setup>
import { queryByPage } from "@/api/system/role";
import { useFetchPage } from "@/hook/useFetchPage";
import { TableColumnsType } from "ant-design-vue";
import { reactive } from "vue";
import { useI18n } from "vue-i18n";

interface Props {
  /**弹窗 */
  open: boolean;
}
defineProps<Props>();
const { t } = useI18n();
/**表格列 */
const columns = reactive<TableColumnsType>([
  { title: () => t("学号"), dataIndex: "studentNo" },
  { title: () => t("姓名"), dataIndex: "personName" },
]);

const initValue = () => ({
  studentNo: null,
  personName: null,
});
const queryParams = reactive(initValue());
const { state, reload } = useFetchPage(queryByPage, {
  params: queryParams,
});
</script>
